.usermsgs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 8%;
    position: relative;
    .msg{
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: right;
        text-align: left;
        margin-left: 30%;
        &>div{
            margin-top: 4rem;
        }
        .btn {
            margin-left: 1rem;
            color: #FC2D60;
        }
        .btn:hover{
            color:#4C81C9;
            cursor: pointer;
        }
    }
    .topcontainer{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        .Avatar{
            width: 10rem;
        }
    }
    .mark{
        background-color: aqua;
        width: 5rem;
        height: 2.5rem;
        text-align: center;
        line-height: 2.5rem;
        border-radius: 4rem;
        
    }
}
@media screen and (max-width:750px) {
    .usermsgs{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 8%;
        position: relative;
        .msg{
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: right;
            text-align: left;
            margin-left: 30%;
            &>div{
                margin-top: 4rem;
            }
            .btn {
                margin-left: 1rem;
            }
            .btn:hover{
                color:#4C81C9;
                cursor: pointer;
            }
        }
        .topcontainer{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            .Avatar{
                width: 10rem;
            }
        }
        .mark{
            background-color: aqua;
            width: 30px;
            height: 15px;
            text-align: center;
            line-height: 15px;
            border-radius: 4rem;
        }
    }    
}